<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>生成</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="screen-orientation" content="portrait">
		<meta name="x5-orientation" content="portrait">
		<style type="text/css">
			html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
			body{
				font-family: "microsoft yahei";
			}
			.generate{
				position: relative;
				color: white;
				background-color: #b00000;
			}
			textarea{ 
				font-family: "microsoft yahei"; 
			    border:0;  
			    background-color:transparent; 
			    color: #666464;  
			    height: auto; 
			    resize: none; 
			} 
			input{
				padding: 2px;
				font-family: "microsoft yahei"; 
			    border:0;  
			    background-color:transparent; 
			    color: #666464;  
			    height: auto; 
			    resize: none;
			} 
			.line{border-bottom: 1px white solid;width: 20px;}
			/*生成页的textarea输入框*/
			.generate_t1{
				color: white;
				font-size: 16px;
				line-height: 24px;
				height: 20px;
				position: absolute;
				top: 10%;
				left: 10%;
				width: 50%;
				border: 1px solid rgba(255,255,255,0.4);
			}	
			.generate_t2{
				/*text-align: center;*/
				color: white;
				font-size: 20px;
				line-height: 45px;
				height: 225px;
				position: absolute;
				top: 23%;
				left: 10%;
				width: 80%;
				border: 1px solid rgba(255,255,255,0.4);
			}
			.generate_t3{
				text-align: right;
				color: white;
				font-size: 16px;
				line-height: 24px;
				height: 20px;
				position: absolute;
				top: 71%;
				right: 10%;
				border: 1px solid rgba(255,255,255,0.4);
			}
			.generate_p{
				position: absolute;
				top: 66%;
				right: 10%;
				font-size: 20px;
				line-height: 30px;
			}
			.button{
				display: block;
				width: 60%;
				position: absolute;
				left: 20%;
				bottom: 12%;
			}
			.button img{
				width: 100%;
			}
			.random{
				position: absolute;
				left: 36.6%;
				top: 60%;
				display: block;
				width: 26.8%;
			}
			.random img{
				width: 100%;
			}
		</style>
	</head>
	<body>
		<div class="generate">
			 <input placeholder="请输入祝福对象" onpropertychange="checkLength(this,10);" oninput="checkLength(this,10);" class="generate_t1" name="" rows="" cols=""></input>
			 <textarea placeholder="请输入祝福语" onpropertychange="checkLength(this,30);" oninput="checkLength(this,30);"  class="generate_t2" name="" rows="" cols=""></textarea>
			 <a class="random" href="javascript:;"><img src="img/random.png"/></a>
			 <p class="generate_p">INSIGHT</p>
			 <input placeholder="请输入您的姓名" onpropertychange="checkLength(this,10);" oninput="checkLength(this,10);" class="generate_t3" name="" rows="" cols=""></input>
			 <a class="button" href="javascript:;">
			 	<img src="img/generate.png"/>
			 </a>
		</div>
		
		
		
		
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function checkLength(obj, maxlength) {
				if(obj.value.length > maxlength) {
					obj.value = obj.value.substring(0, maxlength);
				}
			}
			
			$(document).ready(function() {
				mainliWidth();
				$(window).resize(function() {
					mainliWidth();
				});
				function mainliWidth() {
					var height = document.documentElement.clientHeight;
					$(".generate").css("height", height);
				}
			});
		
			window.onresize = function(){
				video1.style.width = window.innerWidth + "px";
				video1.style.height = window.innerHeight + "px";
			}
			
			//随机文字
			var textinput = ['2017年\n新春快乐\n业绩冲天\n大展宏图','2017年\n新春快乐\n恭喜发财\n生对二孩','2017年\n新春快乐\n万事大吉\n阖家欢乐', ];
			$(".random").click(function() {
				var rand = parseInt(Math.random() * 3);
				$(".generate_t2").val(textinput[rand]);
			})
			
			//生成祝福
			$(".button").click(function(){
			var from = $(".generate_t1").val();
			var to = $(".generate_t3").val();
			var content = $(".generate_t2").val();
			if(from ==""){
				alert("请输入祝福对象")
				return false;	
			}
			if(to ==""){
				alert("请输入您的姓名")
				return false;	
			}
			if(content ==""){
				alert("请输入祝福语")
				return false;	
			}
			console.log(from)
				$.ajax({
					type:"post",
					url:"./app/index.php?c=index&a=createBlessing",
					data:{'from':from,'to':to,'content':content},
					success:function(ret){
						window.location.href="index.html?id="+ret.id+"&video=no";
						
					}
				});
			})
			
		</script>
	</body>
</html>
